import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'mobx-react'
import { AppContainer } from 'react-hot-loader' // eslint-disable-line
import { AppState } from './store/appState'
import App from './views/index'

const render = (Component, isHot) => {
    const componentRender = isHot ? ReactDOM.hydrate : ReactDOM.render
    componentRender(
        <AppContainer>
            <Provider appState={new AppState()}>
                <BrowserRouter>
                    <Component />
                </BrowserRouter>
            </Provider>
        </AppContainer>,
        document.getElementById('root')
    );
};

render(App)

if (module.hot) {
    module.hot.accept('./views/index', () => {
        const NextApp = require('./views/index').default // eslint-disable-line
        render(NextApp, module.hot)
    })
}
